<template>
  <div class="c-ygyg-top__loading" v-if='show'>
    <div :class="['c-top__loading', {'c-top__loading--before': loadingBefore, 'c-top__loading--after': loadingAfter}]" ref="loading">
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopLoading',
  data() {
    return {
      show: false,
      loadingBefore: false,
      loadingAfter: false
    }
  },
  methods: {
    loaded() {
      this.$refs.loading.addEventListener('animationend', this.changeLoading)
    },
    changeLoading() {
      this.loadingBefore = false
      this.loadingAfter = true
      this.$refs.loading.removeEventListener('animationend', this.changeLoading)
      this.$refs.loading.addEventListener('animationend', this.closeLoading)
    },
    closeLoading() {
      this.loadingAfter = false
      this.$refs.loading.addEventListener('animationend', this.closeLoading)
    }
  }
}
</script>

<style>
.c-ygyg-top__loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.c-top__loading {
  width: 100vw;
  height: 2px;
  background: #14ce14;
  transform: translate3d(-100%, 0, 0);
}

.c-top__loading.c-top__loading--before {
  animation: top-loading-before .5s ease-in-out forwards;
}

.c-top__loading.c-top__loading--after {
  animation: top-loading-after .5s ease-in-out;
}

@keyframes top-loading-before {
  from {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(-10%, 0, 0);
    opacity: 1;
  }
}

@keyframes top-loading-after {
  from {
    transform: translate3d(-10%, 0, 0);
  }
  to {
    transform: translate3d(0%, 0, 0);
  }
}
</style>
